@tailwind base;
@tailwind components;
@tailwind utilities;

/* 添加全局字体设置 */
:root {
  font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 主题色 */
  --primary-color: #0066ff;
  --primary-hover: #428dff;

  /* 数据选中高亮色 */
  --data-selected-highlight-color: rgb(255, 255, 255);
  --report-rate-default-border: rgb(51, 51, 51);

  /* 文字颜色 */
  --text-primary: #f7fafc;
  --text-secondary: rgba(247, 250, 252, 0.7);
}

/* ========== 布局相关 ========== */
/* 主背景 */
.panel-main-bg {
  background-color: rgb(26, 32, 44);
  border-radius: 0.5rem; /* Equivalent to rounded-lg */
  overflow: hidden;
}

/* 主前景 */
.panel-main-fg {
  background-color: rgb(45, 55, 72);
  border-radius: 8px;
}

/* ========== 按钮样式 ========== */
/* 主按钮 */
.main-btn {
  @apply inline-flex !bg-[rgb(51,51,51)] hover:!bg-[rgb(81,81,81)] !text-gray-200 hover:!text-white !rounded-md !h-8 !ps-3 !pe-3;
}

/* 下拉菜单按钮 */
.selecet-menu-btn {
  @apply !bg-[rgb(51,51,51)] hover:!bg-[rgb(81,81,81)] !text-gray-200 hover:!text-white;
  &:hover {
    box-shadow: 0 0 2px 0 rgba(200, 239, 255, 0.48);
  }
}

/* 下拉菜单选项 */
.select-menu-item {
  @apply !bg-[rgb(51,51,51)] hover:!bg-[rgb(81,81,81)] !text-gray-200 hover:!text-white;
}

/* 自定义垂直滚动条 */
::-webkit-scrollbar {
  width: 6px; /* 设置垂直滚动条的宽度 */
}

::-webkit-scrollbar-track {
  background: rgba(45, 55, 72, 0.3); /* 滚动条轨道的背景 */
}

::-webkit-scrollbar-thumb {
  background: #4a5568; /* 滚动条滑块的颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background: #718096; /* 鼠标悬停时滚动条滑块的颜色 */
}

/* 自定义滚动条在 Firefox 中的样式（只适用于支持的浏览器） */
scrollbar {
  width: 6px;
}

scrollbar-track {
  background: rgba(45, 55, 72, 0.3);
}

scrollbar-thumb {
  background: #4a5568;
}

scrollbar-thumb:hover {
  background: #718096;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/*鼠标图片*/
.g3_mouse_box {
  position: relative; /* 让子元素可以使用绝对定位 */
  width: 292px;
  height: 436px;
  z-index: -1;

  /* 鼠标主体 */
  .mouse_body {
    position: absolute; /* 绝对定位 */
    width: 290px;
    height: 430px;
    top: 6px;
    left: 4px;
  }

  /* 中央线 */
  .mouse_center_line {
    position: absolute;
    width: 2px;
    height: 27px;
    top: 195px;
    left: 130px;
    z-index: 20;
  }
  /* 中央LGO*/
  .mouse_logo {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 350px;
    left: 110px;
    z-index: 20;
  }

  /* 左键 */
  .mouse_left_click {
    position: absolute;
    width: 118px;
    height: 216px;
    top: 6px;
    left: 12px;
  }

  .mouse-left--actived {
    filter: invert(38%) sepia(85%) saturate(5430%) hue-rotate(210deg);
    opacity: 0.1;
  }

  /* 右键 */
  .mouse_right_click {
    position: absolute;
    width: 119px;
    height: 216px;
    top: 6px;
    right: 2px;
  }

  .mouse-right--actived {
    filter: invert(38%) sepia(85%) saturate(5430%) hue-rotate(210deg);
    opacity: 0.1;
  }

  /* 中键 */
  .mouse_middle {
    position: absolute;
    width: 34px;
    height: 186px;
    top: 8px;
    right: 104px;
  }

  .mouse-middle--actived {
    filter: invert(38%) sepia(85%) saturate(5430%) hue-rotate(210deg);
  }

  /* 前进按钮 */
  .mouse_forward {
    position: absolute;
    width: 9px;
    height: 66px;
    top: 157px;
    left: 6px;
  }

  .mouse-forward--actived {
    filter: invert(38%) sepia(85%) saturate(5430%) hue-rotate(210deg);
  }

  /* 后退按钮 */
  .mouse_backward {
    position: absolute;
    width: 12px;
    height: 68px;
    top: 229px;
    left: 6px;
  }

  .mouse-backward--actived {
    filter: invert(38%) sepia(85%) saturate(5430%) hue-rotate(210deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.rotate {
  @apply hover:cursor-pointer hover:rotate-180 ease-out transition-all duration-[2000];
}

.primary-btn {
  @apply !bg-[#006BEE] !text-white !rounded-[8px] !px-3  hover:!bg-[#0066FF]/90;
}

.error-btn {
  @apply !bg-red-600 !text-white !rounded !px-3  hover:!bg-red-600/90;
}

.normal-btn {
  @apply !bg-[#184FB652] text-center !rounded-none !text-sm !px-3 !h-8;
}

.border-gradient {
  @apply border;
  border-image: linear-gradient(to bottom, #022e6f, #0b0c6a) 1;
}

.commbo-keys {
  @apply flex justify-center gap-4 items-center;
  .commbo-key {
    @apply p-4 border border-gray-700 bg-gray-800 rounded-lg hover:cursor-pointer;
    &[data-selected="true"] {
      @apply bg-gray-600 border-gray-500;
    }
  }
  .input-key {
    @apply border border-gray-600 h-12 px-2 w-16 text-xl;
  }
}

.keyinput-box {
  @apply bg-gray-800 border-gray-700 text-white !text-xl font-medium text-center px-0.5;
  &:focus {
    @apply bg-gray-700 border border-gray-500 outline-none;
  }
}

.common-key {
  color: #303134;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #d7dee3;
}

.common-key--center {
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 60px;
  border: none;
}

.key-actived {
  color: #06f !important;
  font-weight: 700;
  border: 1px solid #06f;
  background: rgba(0, 102, 255, 0.1);
}

.common-dian {
  background: #d7dee3;
  border-radius: 50%;
  border: 1px solid #f8f9fb;
  width: 12px;
  height: 12px;
}

/* ========== 宏相关样式 ========== */
/* 宏录制按钮 */
.macro-stop-record,
.macro-start-record {
  @apply !outline-none !shadow-none w-[140px] !h-[56px] !rounded-[8px];
}

/* 宏按键动作指示器 */
.triangle-bottom {
  @apply absolute -top-5 left-1/2 -translate-x-1/2;
}

.triangle-top {
  @apply absolute -bottom-5 left-1/2 -translate-x-1/2;
}

.macro-key-action {
  &[data-action="keydown"] {
    .triangle-bottom {
      @apply hidden;
    }
  }

  &[data-action="keyup"] {
    .triangle-top {
      @apply hidden;
    }
  }

  &[data-action="mousedown"] {
    .triangle-bottom {
      @apply hidden;
    }
  }

  &[data-action="mouseup"] {
    .triangle-top {
      @apply hidden;
    }
  }
}

/* ========== 其他通用样式 ========== */
.macro-action {
  .add-action {
    visibility: hidden;
  }
}

.macro-action:hover {
  @apply cursor-pointer;
  .add-action {
    @apply visible;
  }
}

.outline-btn {
  @apply border border-blue-1 !text-blue-1 !font-normal !bg-transparent;
}

.macro-list .macro-list-action {
  @apply hidden;
}

.macro-list:hover .macro-list-action {
  @apply flex;
}

@media (min-width: 1440px) {
  .transition-btn {
    width: 600px;
    transition: transform 0.3s ease;
  }
}
@media (max-width: 1440px) {
  .transition-btn {
    width: 512px;
    transition: transform 0.3s ease;
  }
}

.product-card {
  @apply p-6 hover:shadow-gray-700 hover:bg-gray-600/30 hover:cursor-pointer text-stone-100 hover:text-gray-50;

  background-color: rgba(255, 255, 255, 0.16);

  &:hover {
    box-shadow: inset 0 0 16px 0 #82d4ff;
  }
}
